<template>
  <div>
      <Table border :columns="columns7" :data="data6"></Table>
      <Page :total="pageInfo.total" :pageSize="pageInfo.pageSize"  :current="pageInfo.current"
        v-on:on-change="onChangeHandler" v-on:on-page-size-change="onPageSizeChangeHandler" show-sizer show-total/>
  </div>
</template>

<script>
/* eslint-disable */
export default {
   name: 'tablelist',
    data () {
      return {
        pageInfo: {
          pageSize : 10,
          total: 100,
          current: 1,
        },
       columns7: [
        {
            title: 'Name',
            key: 'username',
            render: (h, params) => {
                return h('div', [
                    h('Icon', {
                        props: {
                            type: 'person'
                        }
                    }),
                    h('strong', params.row.username)
                ]);
            }
        },
        {
            title: 'Password',
            key: 'password'
        },
        {
            title: 'Sex',
            key: 'sex'
        },
        {
            title: 'Action',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                this.show(params.index)
                            }
                        }
                    }, 'View'),
                    h('Button', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        on: {
                            click: () => {
                                this.remove(params.index)
                            }
                        }
                    }, 'Delete')
                ]);
            }
        }],
        //data6: [{"id":15,"username":"花落","password":"654321","sex":1},{"id":16,"username":"花落2","password":"654321","sex":0},{"id":17,"username":"花落3","password":"654321","sex":2},{"id":18,"username":"花落4","password":"123456","sex":1}]
        data6: []
    
      }
    },
    methods: {
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `userName: ${this.data6[index].username}<br>password：${this.data6[index].password}<br>Sex：${this.data6[index].sex}`
            })
        },
        remove (index) {
           // this.data6.splice(index, 1);
            this.deleteById(this.data6[index].id);
        },
        onChangeHandler(pageIndex){
            this.pageInfo.current = pageIndex
            this.findbyPage()
        },

        onPageSizeChangeHandler(pageSize){
            this.pageInfo.pageSize = pageSize
            this.findbyPage()
        },
        // 分页查询
        findbyPage(){
            this.axios.post("api/user/page",{
               params:{
                   pageSize: this.pageInfo.pageSize,
                   page: this.pageInfo.current
               }     
            }).then((response) => {
                if(response.data.code == 0){
                    this.data6 = response.data.data.results
                    this.pageInfo.total = response.data.data.count
                }
            })
        },

        // 删除记录
        deleteById(id){
            this.axios.post("api/user/delete/"+id).then((response) => {
                if(response.data.code == 0){
                     this.$Notice.success({
                        top: 50,
                        duration: 2,
                        desc: response.data.msg
                    })
                    this.findbyPage();
                }
            })
        }
    },
    mounted(){
        this.findbyPage()
    }
}
</script>


<style>

</style>